<template>
	<view>
		<!-- 轮播图 -->
		<view>
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image src="/static/weixiu/建筑.webp" style="width: 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 文字介绍 -->
		<view class="text">
			<text>伟业汽车维修厂(人民路店)</text>
			<view class="score">
				<uni-rate class="xx" size="18" :readonly="true" :value="storeScore" />
				<text>{{storeScore}}分</text>
				<text>销量：332</text>
			</view>
			<text>营业时间：周一至周五 09:00-22:00</text><br />
			<text>山阳区人民中路36号</text>
			<image @click="toNav" src="/static/plane.png" mode="" style="width: 14px; height: 14px; padding-left: 10px;">
			</image>
		</view>
		<!-- 服务 -->
		<view class="service">
			<text>服务项目</text>
			<!-- <view class="serviceClassify">
				<uni-data-checkbox multiple v-model="value" :localdata="range"></uni-data-checkbox>
				<text style="padding-left: 15px;">¥ 199</text>
				<text style="padding-left: 25px; color: red; text-decoration: line-through;">¥ 299</text><br />
			</view> -->
			<view class="itemstyle" v-for="(item,index) in items" :key="index">
				<text>{{item.itemName}}</text>
				<view class="price">
					<text style="padding-left: 15px;">现价：¥{{item.currentPrice}}</text>
					<text
						style="padding-left: 25px; color: red; text-decoration: line-through;">¥{{item.originPrice}}</text><br />
				</view>

			</view>


		</view>
		<!-- 服务评价 -->
		<view class="evaluate">
			<text>服务评价</text>
			<!-- 评价列表 -->
			<view class="evaluateList">
				<view>
					<image src="/static/weixiu/堆糖.jpeg" mode="" class="avatar"></image>
				</view>
				<view class="userMsg">
					<text>李**</text>
					<text>2022-09-10</text>
					<view>
						<uni-rate class="xx" size="18" :readonly="true" :value="userScore" />
					</view>
					<view class="evaluateContent">
						评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
		<view class="twoBtn">
			<button @click="toReservation">立即预约</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: ''
				}, {
					content: ''
				}, {
					content: ''
				}, {
					content: ''
				}, {
					content: ''
				}, ],
				current: 0,
				mode: 'round',

				storeScore: 4, // 评分
				userScore: 3,
				value: 0,
				//服务项目列表
				items: [{
						"itemName": "轮胎",
						"currentPrice": 199,
						"originPrice": 299
					},
					{
						"itemName": "发动机",
						"currentPrice": 5199,
						"originPrice": 6199
					},
					{
						"itemName": "变速箱",
						"currentPrice": 199,
						"originPrice": 299
					},
				],
			}
		},
		methods: {
			change(e) {

				this.current = e.detail.current;
			},
			toNav(){
				uni.navigateTo({
					url:"/pages/maintenance/nearStore/storeDetail/navigation/navigation"
				})
			},
			toReservation(){
				uni.navigateTo({
					url:"/pages/maintenance/nearStore/storeDetail/reservation/reservation"
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.swiper-box {
		height: 225px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 225px;
		color: #fff;
	}

	.text text:nth-child(1) {
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		font-weight: bold;
		position: relative;
	}

	.text text:nth-child(3) {
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
	}

	.text text:nth-child(5) {
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
	}

	.text {
		padding-left: 16px;
		padding-top: 17px;
		padding-bottom: 10px;
		border-bottom: 1px solid #F1F1F1;
	}

	.xx {
		margin: 10rpx 0;
	}

	.score {
		position: relative;
	}

	.score text {
		margin: 10rpx 0;
	}

	.score text:nth-child(2) {
		position: absolute;
		right: 450rpx;
		color: rgba(108, 108, 108, 1);
		font-size: 14px;
		top: -10rpx;
	}

	.score text:nth-child(3) {
		position: absolute;
		color: rgba(16, 16, 16, 1);
		font-size: 12px;
		right: 300rpx;
		top: -13rpx;
	}

	.service {
		padding-top: 10px;
		padding-left: 31px;
	}

	.service>text:nth-child(1) {
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		font-weight: bold;
	}

	.evaluate {
		padding-left: 36px;
		padding-top: 25px;
	}

	.evaluate>text:nth-child(1) {
		font-size: 16px;
		font-weight: 1000;
	}

	.evaluateList {
		padding-top: 10px;
		display: flex;
		line-height: 16px;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 100%;
	}

	.userMsg {
		padding: 0 15px;
		font-size: 14px;
	}

	.userMsg text:nth-child(2) {
		position: absolute;
		right: 36px;
	}

	.evaluateContent {
		padding-top: 5px;
		padding-right: 10px;
	}

	.twoBtn {
		width:100%;
		background-color: white;
		position: fixed;
		bottom: 0px;
		
	}

	.twoBtn button {
		width: 80%;
		height: 35px;
		border-radius: 100px;
		font-size: 14px;
		line-height: 35px;
		text-align: center;
		margin:0 auto;
		background-color: #1D6FFF;
		color: white;
		font-weight: bold;
	}

	
	.orderText {
		padding-left: 10px;
		background-color: #EFEFEF;
		height: 53px;
		line-height: 53px;
		font-size: 14px;
		border: 1px solid #D1D1D1;
	}

	.uni-list-cell {
		display: flex;
		justify-content: flex-start;
		margin: 0 20px;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #F1F1F1;
		font-size: 12px;
	}

	.checkPrice {
		position: absolute;
		right: 40px;
	}

	.closePop {
		position: absolute;
		right: 20px;
	}

	.itemstyle {
		width: 90%;
		height: 90rpx;
		margin-top: 20rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F5F5F5;
	}

	.itemstyle .price {
		float: left;
		
	}
</style>